<template>
  <div class="exam-container">
    <el-skeleton :loading="isFirst" :rows="10" animated>
    <el-descriptions title="职务详情" direction="vertical" :column="2" border>
      <!-- column为每行2列 如果列中将span设置为2 则何为1列 -->
      <template #extra>
        <el-button type="primary" v-if="state == 1" @click="() => (state = 2)">编辑</el-button>
        <el-button type="warning" v-if="state == 2" @click="save()">保存</el-button>
      </template>

      <el-descriptions-item label="名称" :width="750" :span="1">
        <el-tag v-if="state == 1">{{ data.name }}</el-tag>
        <el-input placeholder="在此输入组织名称" v-model="data.name" v-if="state == 2"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label="等级" :span="1">
        <el-tag v-if="state == 1">{{ data.lv }}</el-tag>
        <el-input-number
          v-model="data.lv"
          style="width: 100%"
          min="1"
          max="999"
          v-if="state == 2"
        ></el-input-number>
      </el-descriptions-item>

      <el-descriptions-item label="描述" :span="2">
        <el-tag v-if="state == 1">{{ data.explain == '' ? '-' : data.explain }}</el-tag>
        <el-input
          type="textarea"
          placeholder="组织描述"
          v-model="data.explain"
          v-if="state == 2"
        ></el-input>
      </el-descriptions-item>
    </el-descriptions>
</el-skeleton>
  </div>
</template>
    
    <script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getSingleZhiwu, updateZhiwu } from '../../api/org'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type addTreeOrgDto from '@/dto/org/addTreeOrgDto'
import { closeLoad, openLoad } from '@/utils/loading'

export default defineComponent({
  setup() {
    const router = useRouter()
    const routes = useRoute()
    const data = reactive({
      isFirst:true,
      id: '',
      name: '',
      explain: '',
      lv: 1,
      state: 1,
      data: {
        name: '',
        explain: '',
        lv: ''
      }
    })

    const events = {
      //职务详情
      getSingleZhiwu() {
        if (data.id == '') {
          return
        } else {
          getSingleZhiwu({ id: data.id }).then((res: any) => {
            data.data = res.data;
            data.isFirst=false;
          })
        }
      },
      //修改职务
      save() {
        ElMessageBox.confirm('确认修改吗')
          .then(() => {
            openLoad("请稍后");
            updateZhiwu({
              explain: data.data.explain,
              id:data.id,
              lv: data.data.lv,
              name: data.data.name
            }).then((res: any) => {
             closeLoad();
              if (res.result === 0) {
                closeLoad();
                ElMessage.success('操作成功')
                router.go(-1);
              } else {
                ElMessage.error(res.message)
              }
            })
          })
          .catch(() => {})
      }
    }

    onMounted(() => {
      data.id = routes.params.id.toString()
      events.getSingleZhiwu()
    })
    return {
      ...toRefs(data),
      ...events
    }
  }
})
</script>
    